Angular-এর Change Detection হল একটি গুরুত্বপূর্ণ প্রক্রিয়া যা Angular অ্যাপ্লিকেশনের UI-কে আপডেট রাখে যখন ডেটা পরিবর্তিত হয়। Angular দ্বারা ব্যবহৃত Change Detection Strategy দুটি প্রধানভাবে ব্যবহৃত হয়: Default এবং OnPush।

Change Detection কি?

Change Detection হল Angular-এর একটি প্রক্রিয়া যার মাধ্যমে Angular জানে কখন DOM আপডেট করতে হবে। Angular-এর Change Detection মূলত দুটি কাজ করে:

1. কম্পোনেন্টের ডেটা চেক করা – Angular জানে কোন ডেটা পরিবর্তিত হয়েছে এবং সেগুলি UI তে রিফ্লেক্ট করে।
2. UI আপডেট করা – যখন Angular জানতে পারে যে কোনো ডেটা পরিবর্তিত হয়েছে, তখন এটি UI আপডেট করে।

Angular-এর Change Detection ডিফল্টভাবে Default Strategy ব্যবহার করে, যা সমস্ত কম্পোনেন্টের ডেটার ওপর নজর রাখে। তবে, কনফিগারেশনে কিছু পরিবর্তন করলে আপনি OnPush Strategy ব্যবহার করতে পারেন, যা কিছু ক্ষেত্রে পারফরম্যান্স উন্নত করতে সাহায্য করে।

Default Change Detection Strategy

Default Change Detection Strategy হল Angular-এর ডিফল্ট কৌশল, যেখানে Angular সমস্ত কম্পোনেন্টের সমস্ত প্রোপার্টি পরিবর্তন সনাক্ত করে এবং DOM আপডেট করে। এই কৌশলটি প্রতিটি কম্পোনেন্টের প্রতি চেক করার জন্য একটু বেশি ভারী হতে পারে, বিশেষ করে বড় অ্যাপ্লিকেশনগুলির জন্য।

Default Strategy-তে Change Detection

• Angular সবসময় Component বা Directive-এর প্রতি পরিবর্তন মনিটর করে। অর্থাৎ, এটি চেক করে যে কোনো input property পরিবর্তিত হয়েছে কি না।
• যদি কোন ডেটা পরিবর্তিত হয়, Angular ঐ কম্পোনেন্টের উপর Change Detection চালায় এবং DOM আপডেট করে।
• এই প্রক্রিয়াটি ঘনঘন হয়, যার ফলে এটি বড় অ্যাপ্লিকেশনে পারফরম্যান্স সমস্যার সৃষ্টি করতে পারে।

@Component({
  selector: 'app-default',
  templateUrl: './default.component.html',
  changeDetection: ChangeDetectionStrategy.Default
})
export class DefaultComponent {
  data: string = "Hello, World!";
}

এখানে ChangeDetectionStrategy.Default ব্যবহার করা হয়েছে, যা Angular-কে বলে দেয় যে, কম্পোনেন্টের উপর automatically চেক করতে হবে।

OnPush Change Detection Strategy

OnPush Change Detection Strategy হল একটি অপটিমাইজড কৌশল যা Angular-এর Change Detection প্রক্রিয়াকে আরও কার্যকরী করে তোলে, বিশেষ করে বড় অ্যাপ্লিকেশনগুলির জন্য। যখন একটি কম্পোনেন্ট OnPush কৌশল ব্যবহার করে, Angular কেবলমাত্র তখনই Change Detection চালায় যখন:

1. Input Property পরিবর্তিত হয়।
2. Event (যেমন, Click বা Submit) ঘটে।
3. Observable বা Promise এর মান পরিবর্তিত হয়।

এটি Angular-কে পুনরায় চেক করার জন্য কম্পোনেন্টের "input" প্রপার্টি অথবা নির্দিষ্ট পরিবর্তনের উপর নির্ভরশীল করে, তাই এই কৌশলটি অধিক কার্যকরী এবং দ্রুত।

OnPush Strategy-তে Change Detection

• OnPush কৌশল ব্যবহার করলে, Angular শুধুমাত্র তখনই Change Detection চালাবে যখন input property, event, অথবা observable পরিবর্তিত হবে।
• এই কৌশলটি কম্পোনেন্টের পারফরম্যান্স বাড়াতে সাহায্য করে, কারণ Angular কম্পোনেন্টের প্রতি প্রতিটি চেক করার পরিবর্তে শুধুমাত্র নির্দিষ্ট পরিবর্তনগুলো মনিটর করে।

@Component({
  selector: 'app-onpush',
  templateUrl: './onpush.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushComponent {
  @Input() data: string = "Hello, OnPush!";
}

এখানে ChangeDetectionStrategy.OnPush ব্যবহার করা হয়েছে, যা Angular কে বলে দেয় যে শুধুমাত্র data প্রপার্টি পরিবর্তিত হলে Change Detection চালানো হবে।

Default vs OnPush: পারফরম্যান্স পার্থক্য

1. Default Strategy:
   • Angular সকল কম্পোনেন্টের উপর পরিবর্তন চেক করে।
   • বড় অ্যাপ্লিকেশনের ক্ষেত্রে অনেক বেশি সিস্টেম রিসোর্স খরচ হতে পারে, কারণ প্রতিটি কম্পোনেন্টের প্রতি পরিবর্তন দেখার জন্য Angular অনেক বার চেক করে।
2. OnPush Strategy:
   • শুধুমাত্র নির্দিষ্ট কম্পোনেন্টের input property পরিবর্তিত হলে অথবা observable পরিবর্তিত হলে Change Detection চলে।
   • এটি ছোট অ্যাপ্লিকেশনগুলোতে ব্যবহৃত হতে পারে এবং বড় অ্যাপ্লিকেশনে পারফরম্যান্সের দিক থেকে অনেক উন্নতি এনে দেয়।

কবে OnPush ব্যবহার করা উচিত?

1. ডেটা পরিবর্তন স্পষ্ট থাকলে, অর্থাৎ, যখন কম্পোনেন্টের ইনপুট প্রপার্টি শুধুমাত্র মিউটেশন (mutations) এর মাধ্যমে পরিবর্তিত হয়।
2. যখন কম্পোনেন্ট immutable data ব্যবহার করে (যেমন, কোন ডেটা অবজেক্ট বা অ্যারে কখনই সরাসরি পরিবর্তিত হয় না)।
3. যখন আপনি জানেন যে Change Detection শুধুমাত্র input বা event পরিবর্তনের সময় ঘটবে।

কবে Default ব্যবহার করা উচিত?

1. যদি আপনি complex UI বা dynamic state পরিচালনা করছেন, যেখানে ইনপুট প্রপার্টি বারবার পরিবর্তিত হয়।
2. যদি আপনার অ্যাপ্লিকেশনটি ছোট হয় এবং পারফরম্যান্স বিষয়টি এতটা গুরুত্বপূর্ণ না হয়।

সারাংশ

• Default Change Detection-এ Angular সবসময় কম্পোনেন্টের উপর Change Detection চালায়, যা পারফরম্যান্সকে প্রভাবিত করতে পারে বড় অ্যাপ্লিকেশনগুলোতে।
• OnPush Change Detection শুধুমাত্র ইনপুট প্রপার্টি পরিবর্তন, ইভেন্ট অথবা Observable-এ পরিবর্তন হলে Change Detection চালায়, ফলে এটি পারফরম্যান্সের দিক থেকে অনেক কার্যকরী এবং দ্রুত।

এটি বড় অ্যাপ্লিকেশনগুলির জন্য একটি উত্তম পদ্ধতি, যেখানে কম্পোনেন্টগুলো বড় এবং বারবার আপডেট হয়।